<template>
  <uni-segmented-control 
    :current="tabIndex" 
    :values="['点餐', '评价', '商家']" 
    @clickItem="onTabChange" 
    style-type="text" 
    active-color="#ff6700"
  />
</template>

<script setup>
import { ref, watch } from 'vue'
const props = defineProps({ activeTab: { type: String, default: 'order' } })
const emit = defineEmits(['change'])
const tabMap = ['order', 'comment', 'merchant', 'group'] // Tab对应的值
const tabIndex = ref(tabMap.indexOf(props.activeTab))

// 监听Tab切换
const onTabChange = (index) => {
  emit('change', tabMap[index])
}
// 监听props变化（可选）
watch(() => props.activeTab, (val) => {
  tabIndex.value = tabMap.indexOf(val)
})
</script>

<style scoped>
::v-deep .uni-segmented-control { margin: 10rpx 0; }
</style>